<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>宜鲜生</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css?v=v3.3.7" media="all">
    <link rel="stylesheet" type="text/css" href="../css/font/iconfont.css?v=1.0.0" media="all">
    <link rel="stylesheet" type="text/css" href="../css/layui.css?v=1.0.9" media="all">
    <link rel="stylesheet" type="text/css" href="../css/main.css?v1.3.4" media="all">
    <link rel="stylesheet" type="text/css" href="../asset/treegrid/jquery.treegrid.css">
    <link rel="stylesheet" type="text/css" href="../css/autocomplete.css" media="all">

</head>
<div class="container-fluid larry-wrapper">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <!--头部搜索-->
           <!-- <section class="panel panel-padding">
                <form class="layui-form" action="/education/admin/menu">
                    <div class="layui-form">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input class="layui-input" name="_query.keyword" placeholder="关键字">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button lay-submit class="layui-btn" lay-filter="search">查找</button>
                        </div>
                    </div>
                </form>
            </section>-->

            <!--列表-->
            <section class="panel panel-padding">
                <div class="group-button">
                    <button class="layui-btn layui-btn-small modal-catch" beforeFun="beforeAdd"
                            data-params='{"content":".add-subcat", "title":"添加","type":"1", "full":"true"}'>
                        <i class="iconfont">&#xe649;</i> 添加
                    </button>

                </div>
                <div id="list" class="layui-form"></div>
            </section>
        </div>
    </div>
</div>

    <table id="treeGrid" class="layui-table lay-even tree">
        <thead>
            <tr>
                <!--<th width="30"><input type="checkbox" id="checkall" data-name="checkbox" lay-filter="check"
                                      lay-skin="primary"></th>-->
                <th name="name">名称</th>
                <th name="icon">图标</th>
                <th name="operator">权限</th>
                <th name="ord" width="80">排序</th>
                <th width="200" type="operate">操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
<script type="text/javascript" src="../js/lib/rest.js"></script>
<script type="text/javascript" src="../js/lib/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../asset/treegrid/jquery.treegrid.js"></script>
<script type="text/javascript" src="../js/lib/bootstrap.autocomplete.js"></script>
<script src="../js/layui/layui.js"></script>
<!--#include file="menu-cat.html"-->
<!--#include file="common/version.html"-->
<script>
initSelect();
    layui.use(['tree', 'layer', 'dtable', 'jqdate', 'jqform'], function() {
        var $ = layui.jquery,
                list = layui.dtable,
                ajax = layui.ajax,
                form = layui.jqform,
                modal = layui.modal,
                oneList = new list();
        form.set({
            "change": true,
            "form": "#form1"
        }).init(oneList);
        var n=0,gridStr = '';


        var btn = "<td><button class=\"layui-btn layui-btn-mini \"\n" +
                " onclick=\"update('{ids}');\" >" +
//                "                            data-list='{\"key\":\"id={ids}\",\"msg\":true,\"render\":\"true\",\"action\":\"del\"}'\n" +
//                "                            data-params='{\"url\": \"/education/admin/menu/delete\",\"data\":\"ids={ids}\", \"method\":\"post\"}'>\n" +
                "                        <i class=\"iconfont\">&#xe653;</i>编辑\n" +
                "                    </button>" +
                "<button class=\"layui-btn layui-btn-mini layui-btn-danger\"\n" +
                " onclick=\"del('{ids}');\" >" +
                "                        <i class=\"iconfont\">&#xe626;</i>删除\n" +
                "                    </button></td>";

        var initTreeGrid = function (json, pid) {
            for (var i = 0; n++, i < json.length; i++) {

                var obj = json[i];
//                obj.createTime = new Date(obj.createtime).format("yyyy-MM-dd hh:mm");

                var str = '';
                str = '<tr class="treegrid-' + n;

                if (obj.parentId) {
                    str += ' treegrid-parent-' + pid;
                }
                str += '">';

                $.each($("th", $('#treeGrid >thead')), function (i, n) {
                    var _name = $(n).attr("name");
                    var text = eval("obj." + _name);
                    if (text != null) {
                        if (i == -1) {//添加复选框
                            str += '<td><input type="checkbox" name="ids" class="row" value="' + obj.id + '"/>'
                                    + text + '</td>';
                        } else {
                            if(_name.toLowerCase().indexOf('time') > -1){
                            str += '<td>' + text + '</td>';
                            } else {
                                str += '<td name="{name}" ids="{ids}"><a href="#" onclick="_editTd(this);">' + text +'</a></td>';
                                str = str.replace(/{name}/, _name).replace(/{ids}/, obj.id);
                            }
                        }

                    } else if ($(n).attr("type") == 'operate') {
//                        str += '<td><a style="cursor:pointer;" href="javascript:update(\'' + obj.ids + '\');">修改</a></td>';
                        str += btn.replace(/{ids}/g, obj.id);
                    } else {
                        str += '<td></td>';
                    }
                });

                gridStr = gridStr + str + '</tr>\n';

                // str += '<td>' + obj.text + '</td><td>'+obj.code+'</td></tr>' ;
                //  gridStr += str;
                //如果当前节点为父节点,则循环遍历
                if (obj.children != null) {
                    arguments.callee(obj.children, n);
                }
            }
        };

        restPost('/education/admin/menu/treeData', null, function(rs){
            initTreeGrid(rs.data,1);
            $("#treeGrid > tbody").html(gridStr);
            gridStr = '', n= 0;//重置变量
            $('.tree').treegrid({
                initialState: 'collapsed'  //'collapsed'
               /* expanderTemplate: '<span class="treegrid-expander glyphicon glyphicon-minus"></span>',
                expanderExpandedClass: 'glyphicon glyphicon-minus',
                expanderCollapsedClass: 'glyphicon glyphicon-plus'*/
            });

            modal.init();
        })

    });

    function del(ids){
        layer.confirm('确认 <span style="color:red">删除</span> 操作吗?',  {icon: 3, title:'提示'}, function(index){
            restPost('/education/admin/menu/delete', {'ids': ids}, function(rs){
               if(rs.status == 200){
                   location.reload();
               }
            });
            layer.close(index);
        });
    }

    function update(ids){
        if(ids){
            $('.add-subcat form').attr('action', '/education/admin/menu/update/' + ids);
            restGet('/education/admin/menu/view/' + ids, null, $('#form1'), function(rs){
                var index =  layer.open({
                    type: 1,
                    content: $('.add-subcat'), "title": "编辑", "area":"650px,580px", "maxmin":"true"
                });
                layer.full(index);
            });

        } else {
            layer.open({
                type: 1,
                content: $('.add-subcat'), "title": "添加", "area":"650px,580px", "maxmin":"true"
            });
        }
    }

    function _editTd(obj){
        var v = $(obj).text();
        $(obj).parent().html('<input type="text" class="layui-input" onblur="_updateTd(this);" value="'+ v +'">');
    }

    function _updateTd(obj){
        var k = $(obj).parent().attr('name');
        var ids = $(obj).parent().attr('ids');
        var v = $(obj).val();

        if (k == 'ord') {
            k = 'orderids'
        } else if (k == 'name') {
            k = 'names_zhcn'
        }

        var p = {};
        p[k] = v;
        $(obj).parent().html('<a href="#" onclick="_editTd(this);">'+ v +'</a>');

        restPost('/education/admin/menu/updateOptional/' + ids, p, function(rs){
            if(rs.status == 200){
                //location.reload();
                layer.msg(rs.msg ? rs.msg : '修改成功');
            } else {
                layer.msg(rs.msg ? rs.msg : '修改失败');
            }
        })

    }

    function beforeAdd(){
        $('input[name=ids]').val('');
        $('#form1').attr('action', "/education/admin/menu/save");
    }
</script>